import axios from 'axios'
import { React, useEffect, useState } from 'react'
import './local.css'
import { Carousel } from "antd";
import { Rate } from 'antd';
import { Pagination } from 'antd';
import "antd/dist/antd.css";
import special from "../../static/轮播.png";
import { useNavigate } from "react-router";
import InterIP from '../../IP/IP'
export default function Local() {
  const contentStyle = {
    width: "1280px",
    height: "500px",
  };
  const contentImgStyle = {
    width: "100%",
    height: "100%",
  };
  let IP = InterIP().props.children;;
  const navigate = useNavigate();
  const [localData, setLocalData] = useState([]);
  const [totalNum, setTotalNum] = useState();
  useEffect(() => {
    let IP = InterIP().props.children;
    axios.post('http://' + IP + ':3000/index/selLocal', {
      page: '1'
    }).then((res) => {
      setLocalData((localData) => localData = res.data.rows);
      setTotalNum((totalNum) => totalNum = res.data.rows_length);
    })

  }, [])
  function refresh(request) {
    return () => {
      axios.post('http://' + IP + ':3000/index/selLocal/classify', {
        local_classify: request,
        page: '1'
      }).then((res) => {
        setLocalData((localData) => localData = res.data.rows);
        setTotalNum((totalNum) => totalNum = res.data.rows_length);
      })
    }
  }
  function specialPage() {
    navigate('/home/special')
  }
  function pickPage(page) {
    axios.post('http://' + IP + ':3000/index/selLocal/classify', {
      local_classify: '全部',
      page: page,
    }).then((res) => {
      setLocalData((localData) => localData = res.data.rows);
      setTotalNum((totalNum) => totalNum = res.data.rows_length);
    })
  }
  return (
    <div>
      <div className="lfy_local_list_carousel">
      <Carousel autoplay >
        <div style={contentStyle} onClick={specialPage}>
          <img style={{ contentImgStyle }} src={special} alt="" />
        </div>
        <div style={contentStyle} onClick={specialPage}>
          <img style={{ contentImgStyle }} src={special} alt="" />
        </div>
        <div style={contentStyle} onClick={specialPage}>
          <img style={{ contentImgStyle }} src={special} alt="" />
        </div>
      </Carousel >
        </div>
      <div className="lfy_local_list">
        <ul className="lfy_local_list_brief">
          <li>
            <div className="lfy_local_list_brief_newText">
              <strong>内蒙古草原</strong>
              <strong>羔羊羊精肉</strong>
            </div>
            <div className="lfy_local_list_brief_meatImg">
            </div>
          </li>
          <li>
            <div className="lfy_local_list_brief_hotText">
              <strong>新西兰柠檬</strong>
              <span>鲜橙靓皮 柠香清新</span>
            </div>
            <div className="lfy_local_list_brief_fruitsImg">
            </div>
          </li>
          <li>
            <div className="lfy_local_list_brief_newText">
              <strong>内蒙古草原</strong>
              <strong>黄牛牛精肉</strong>
            </div>
            <div className="lfy_local_list_brief_meatImg">
            </div>
          </li>
          <li>
            <div className="lfy_local_list_brief_hotText">
              <strong>新鲜草莓</strong>
              <span>留住新鲜</span>
            </div>
            <div className="lfy_local_list_brief_fruitsImg">
            </div>
          </li>
        </ul>
        <div className="lfy_local_list_data">
          <div className="lfy_local_list_data_header">
            <ul className="lfy_local_list_data_header_filtrate">
              <li>分类：</li>
              <li onClick={refresh('全部')}>全部</li>
              <li onClick={refresh('餐饮')}>餐饮</li>
              <li onClick={refresh('酒店')}>酒店</li>
              <li onClick={refresh('休闲')}>休闲</li>
              <li onClick={refresh('电影')}>电影</li>
              <li onClick={refresh('汽车装饰')}>汽车装饰</li>
              <li onClick={refresh('家政服务')}>家政服务</li>
            </ul>
            <ul className="lfy_index_local_total_list">
              {localData.map((data) =>
                <li key={data.local_id} className="lfy_index_local_total_list_li">
                  <div className="lfy_index_local_total_list_li_img">
                    <img src={data.local_img} alt="" />
                  </div>
                  <div className="lfy_index_local_total_list_li_div">
                    <h4 className="lfy_index_local_total_list_li_div_h4">{data.local_name}</h4>
                    <h6 className="lfy_index_local_total_list_li_div_h6">
                      <span><Rate disabled defaultValue={data.local_score} className="lfy_index_local_total_list_li_div_h6_score" /></span>
                      <span>￥{data.local_price}</span>
                    </h6>
                    <h5 className="lfy_index_local_total_list_li_div_h5">{data.local_address}</h5>
                  </div>
                </li>
              )}
            </ul>
            <Pagination className="local_paging" onChange={pickPage} total={totalNum} pageSize={12}
            ></Pagination>
          </div>
        </div>
      </div>

    </div>
  )
}
